<template>
	
	<!-- 注册页面 -->
	<div class="register_page">
		 <div>
		        <div class="y_nav">
		          <div id="">
		          	<img src="/img/0-logo-zc.png" >
		          </div>
				  
				  <div style="padding-top: 40px;">
					  <router-link to="/login" style="color: #fff;">返回登录页面 ></router-link>
				 
				  </div>
				  
		        </div>
		        <form action="" class="form-horizontal">
		
		            <div class="register_form">
		                <div>
		                    <h3>欢迎注册</h3>
		                    <h4>Welcome to register</h4>
		                </div>
		                <div class="form-group">
		                    <label for="name" class="col-sm-4 control-label"
		                        style="letter-spacing: 30px;margin-left: 10px;">姓名<span class="space">:</span></label>
		                    <div class="col-sm-5">
		                        <input type="text" v-model="registerUser.name" class="form-control" id="name" name="name" style="margin-left: -26px;"
		                            placeholder="请输入您的姓名">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label for="password" class="col-sm-4 control-label"
		                        style="letter-spacing: 30px;margin-left: 10px;">密码<span class="space">:</span></label>
		                    <div class="col-sm-5">
		                        <input type="password" v-model="registerUser.password" class="form-control" name="password" style="margin-left: -26px;"
		                            placeholder="6-16个字母和数字,必须包括大小写字母和数字">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label for="cpassword" class="col-sm-4 control-label">确认密码:</label>
		                    <div class="col-sm-5">
		                        <input v-model="checkPwd" type="password" class="form-control" id="cpassword" name="cpassword" placeholder="请再次输入密码">
		                    </div>
		                </div>
		                <div class="form-group">
		                    <label for="phone" class="col-sm-4 control-label">手机号码:</label>
		                    <div class="col-sm-5">
		                        <input type="text" v-model="registerUser.phone" class="form-control" id="phone" name="phone" placeholder="请输入手机号码">
		                    </div>
		                </div>
		                <div class="checkbox">
		                    <label>
		                        <input type="checkbox" v-model="provisions"> 阅读并同意《专业技术职称评审系统用户注册协议》
		                    </label>
		                </div>
		                <button type="button" class="form-control btn btn-primary" @click="register">注册</button>
		                <div class="gologin">
		                    已有账号？去<router-link to="/login">登录</router-link>
		                </div>
		
		            </div>
		        </form>
		
		    </div>
	</div>
	
</template>

<script>
	export default {
		name:'register',
		data(){
			return{
				//注册用户
				registerUser:{
					name:'',
					password:'',
					phone:''
				},
				checkPwd:'',
				provisions:false
			}
		},
		computed:{
			//验证注册表单
			verifyRegForm(){
				if(!/^[\u0391-\uFFE5a-zA-Z·&\\s]+$/.test(this.registerUser.name)){
					return {flag:false,msg:'请输入正确的用户名'}
				}
				
				if(!/^[a-zA-Z]\w{5,17}$/.test(this.registerUser.password)){
					return {flag:false,msg:'密码必须6-16个字母和数字,必须包括大小写字母和数字'}
				}
				
				if(this.registerUser.password!==this.checkPwd){
					return {flag:false,msg:'两次密码不一致'}
				}
				
				if(!this.provisions){
					return {flag:false,msg:'请同意条款'}
				}
				
				return {flag:true}
			}
			
		},
		methods:{
			
			//用户注册
			register(){
				// 验证表单
				if(!this.verifyRegForm.flag){
					this.$message.warning(this.verifyRegForm.msg)
					return
				}
				let that=this
				this.$http.post("/applicant/register",this.registerUser).then(res=>{
					that.$message.success("注册成功")
				})
				
			}
			
			
		}
	}
	
</script>

<style scoped>
	
	.register_page{
		background: url(../../public/img/2-0-2-bg.png) no-repeat ;
		background-size: cover;
		width: 100%;
		height: 99.9%;
		padding-top: 1px;
		overflow: hidden;
		
		
	}
	
	.y_nav {
	    display: flex;
	    flex-direction: row;
	    height: 120px;
		justify-content: space-between;
		color: #fff;
	
	}
	
	.y_nav>div{
	    color: #fff;
	   padding: 10px 40px;
	}
	
	
	
	.register_form {
	    width: 530px;
	    height: 600px;  
	    border: 1px solid #000;
	    background-color: rgba(12, 11, 11, 0.7);
	    border-radius: 10px;
	    margin-left: 200px;
	}
	
	.register_form>div {
	    margin-top: 30px;
	
	}
	
	.register_form:after, .register_form:before{
	    content: ".";
	    /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
	    display: block;
	    /*使生成的元素以块级元素显示，占满剩余空间*/
	    height: 0;
	    /*避免生成的内容破坏原有空间的高度*/
	    clear: both;
	    /*闭合浮动*/
	    visibility: hidden;
	    /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
	    overflow: hidden;
	}
	
	.register_form>div>h3,
	.register_form>div>h4 {
	    color: #fff;
	    text-align: center;
	
	}
	
	.register_form>div>h3 {
	    font-weight: 600;
	}
	
	.form-control {
	    width: 300px;
	    height: 40px;
	    background-color: rgb(255, 255, 255, 0.3);
	    color: #fff;
	    border: none;
	}
	
	.col-sm-4.control-label.control-label {
	    color: #fff;
	    font-size: 18px;
	    margin-left: -15px;
	    font-weight: 400;
	}
	
	
	
	.form-group {
	    margin-top: 0px;
	}
	
	input::-webkit-input-placeholder {
	    color: white;
	}
	
	input:-moz-placeholder {
	    /* Mozilla Firefox 19+ */
	    color: white;
	}
	
	input:-moz-placeholder {
	    /* Mozilla Firefox 4 to 18 */
	    color: white;
	}
	
	input:-ms-input-placeholder {
	    /* Internet Explorer 10-11 */
	    color: white;
	}
	
	.checkbox>label {
	    color: #fff;
	    margin-left: 60px;
	    font-size: 12px;
	}
	
	.form-control.btn.btn-primary {
	    border-radius: 8px;
	    font-size: 18px;
	    height: 50px;
	    width: 410px;
	    margin-left: 60px;
	    margin-top: 20px;
	    background-image: linear-gradient(to bottom right, rgba(37, 37, 209), rgba(73, 180, 254));
	}
	.gologin{
	   color: #fff; 
	   margin-left: 360px;
	}
	
	.form-horizontal{
	    width: 530px;
	}
	.space{
	    margin-left: -28px;
	}
	
</style>
